<template>
	<view class="identity_box">
				<view class="img_box" >
					<image  mode="aspectFit" :style="imagesrc!=''?'transform: rotate(270deg)':''"  @click="tomian" :src="mianSrc" class="img" ></image>
				</view>
			
				<view class="img_box">
					<image mode="aspectFit"  @click="toface" :style="imagesrcB!=''?'transform: rotate(270deg)':''"  class="img" :src="faceSrc"></image> 
				</view>
			<text class="tip">Tips： 拍照时务必保证画面清晰,五官可辨</text>
			<view class="btn_bang" @click="okBtn">完成绑定</view>
			<view class="footer_tips">
				<image class="jiami" src="../../../../static/funds/jiami.png"><text class="tip_anquan">信息已加密,保障您的财产安全</text>
				</image>
			</view>
		</view> 
	
	
	

	
	
</template>

<script>
	var _this;
	export default {
		watch:{
			imagesrc(){
				if(this.imagesrc!=""){
					this.mianSrc=this.imagesrc;
				}
			},
				imagesrcB(){
				if(this.imagesrcB!=""){
					this.faceSrc=this.imagesrcB; 
				} 
			}
		}, 
		data() {
			return {
				windowWidth: '',
				windowHeight: '',
				imagesrc: '',
				imagesrcB:'',
				canvasSiz: {
					width: 188, 
					height: 273
				},
				mianSrc:"../../../../static/funds/zhengmian.png",
				faceSrc:"../../../../static/funds/fanmian.png"
			};
		},
		onLoad() {
			_this = this;
			this.init();
		},
		methods: {
			okBtn(){
				if(this.mianSrc==this.imagesrc&&this.faceSrc==this.imagesrcB){
					this.$store.state.identity=true;
					uni.showToast({
					    title: '认证成功',
					    duration: 1000,
						icon:"success"
					}); 
					uni.switchTab({
						url:"../../../my/my"
					})
				}else{
					uni.showToast({
					    title: '认证未完成',
					    duration: 1000,
						icon:"error"
					});
				}
			},
			tomian() {
				uni.navigateTo({
					 url:"../camera/idcard/idcard?dotype=badge"
				})
			},
			toface() {
				uni.navigateTo({
					 url:"../camera/idcard/idcard?dotype=idcardface"
				})
			}, 
			//设置图片
			setImage(e) {
				console.log(e);
				//显示在页面
				if(e.dotype=="idcardface"){
					this.imagesrcB=e.path;
				}else{
					this.imagesrc = e.path;
				}
				
			
				// if (e.dotype == 'idphoto') {
				// 	_this.zjzClipper(e.path);
				// } else if (e.dotype == 'watermark') {
				// 	_this.watermark(e.path);
				// } else {
				// 	_this.savePhoto(e.path);
				// }
			},

			//证件照裁切
			zjzClipper(path) {
				uni.getImageInfo({
					src: path,
					success: function(image) {
						console.log(image);
						_this.canvasSiz.width = 188;
						_this.canvasSiz.height = 273;


						//因为nvue页面使用canvas比较麻烦，所以在此页面上处理图片
						let ctx = uni.createCanvasContext('canvas-clipper', _this);

						ctx.drawImage(
							path,
							parseInt(0.15 * image.width),
							parseInt(0.17 * image.height),
							parseInt(0.69 * image.width),
							parseInt(0.65 * image.height),
							0,
							0,
							188,
							273
						);

						ctx.draw(false, () => {
							uni.canvasToTempFilePath({
									destWidth: 273,
									destHeight: 160,
									canvasId: 'canvas-clipper',
									fileType: 'jpg',
									success: function(res) {
										_this.savePhoto(res.tempFilePath);
									}
								},
								_this
							);
						});
					}
				});
			},

			//添加照片水印
			watermark(path) {
				uni.getImageInfo({
					src: path,
					success: function(image) {
						console.log(image);

						_this.canvasSiz.width = image.width;
						_this.canvasSiz.height = image.height;

						//担心尺寸重置后还没生效，故做延迟
						setTimeout(() => {
							let ctx = uni.createCanvasContext('canvas-clipper', _this);

							ctx.drawImage(
								path,
								0,
								0,
								image.width,
								image.height
							);

							//具体位置如需和相机页面上一致还需另外做计算，此处仅做大致演示
							ctx.setFillStyle('white');
							ctx.setFontSize(40);
							ctx.fillText('live-camera', 20, 100);


							//再来加个时间水印
							var now = new Date();
							var time = now.getFullYear() + '-' + now.getMonth() + '-' + now.getDate() +
								' ' + now.getHours() + ':' + now.getMinutes() + ':' + now.getMinutes();
							ctx.setFontSize(30);
							ctx.fillText(time, 20, 140);

							ctx.draw(false, () => {
								uni.canvasToTempFilePath({
										destWidth: image.width,
										destHeight: image.height,
										canvasId: 'canvas-clipper',
										fileType: 'jpg',
										success: function(res) {
											_this.savePhoto(res.tempFilePath);
										}
									},
									_this
								);
							});
						}, 500)


					}
				});
			},

			//保存图片到相册，方便核查
			savePhoto(path) {
				this.imagesrc = path; 
				//保存到相册
				uni.saveImageToPhotosAlbum({
					filePath: path,
					success: () => {
						uni.showToast({
							title: '已保存至相册',
							duration: 2000
						});
					}
				});
			},

			//初始化
			init() {
				let _this = this;
				uni.getSystemInfo({
					success: function(res) {
						// _this.windowWidth = res.windowWidth;
						// _this.windowHeight = res.windowHeight;
						_this.windowWidth = 330;
						_this.windowHeight = 210;
					}
				});
			}

		}
	};
</script>

<style scoped lang="scss">
	.identity_box {
		width: 750rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		padding-top: 40rpx;

		.img_box {
			width: 670rpx;
			height: 280rpx;
			margin-top: 25rpx;
			background-color: #f4f8ff;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx; 
			background-size:100% 100%;
			background-repeat: no-repeat;
			.img {
				width: 330rpx;
				height: 210rpx;
			}
		}

		.tip {
			font-size: 28rpx;
			color: #868686;
			margin-top: 60rpx;
			margin-bottom: 60rpx;
		}

		.btn_bang {
			width: 670rpx;
			height: 86rpx;
			line-height: 86rpx;
			color: #FFFFFF;
			background-color: $uni-global-color-theme;
			font-size: 28rpx;
			border-radius: 10rpx;
			text-align: center;
		}

		.footer_tips {
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			padding-top: 180rpx;

			.jiami {
				width: 22rpx;
				height: 26rpx;
				margin-right: 14rpx;
			}

			.tip_anquan {
				font-size: 24rpx;
				color: #868686;
			}
		}

	}
</style>
